<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/wode.js"></script>
    <script src="js/anmate.js"></script>
    <script src="js/循环.js"></script>
    <script src="js/日期循环.js"></script>
    <script src="js/风向判断.js"></script>
    <script src="js/颜色判断.js"></script>
    <script src="js/判断城市.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="top">
        <div class="base">
            <img src="images/TCweather.png" style="margin-top: 15px;" width="150px">
            <input id="city" type="input" placeholder="搜索市、区、县等">
            <div id="city-bottom">
                <!-- 当前定位 -->
                <div class="tit">
                    <p style="color: #8a9baf; font-size: 12px;">当前定位</p>
                    <span class="kyl">西安市</span>
                </div>

                <div class="tit">
                    <p style="color: #8a9baf; font-size: 12px;">热门城市</p>
                    <ul id="hotcity">
                        <li><span>北京</span></li>
                        <li><span>上海</span></li>
                        <li><span>广州</span></li>
                        <li><span>深圳</span></li>
                        <li><span>天津</span></li>
                        <li><span>西安</span></li>
                        <li><span>武汉</span></li>
                        <li><span>成都</span></li>
                        <li><span>石家庄</span></li>
                        <li><span>郑州</span></li>
                        <li><span>哈尔滨</span></li>
                        <li><span>太原</span></li>
                        <li><span>乌鲁木齐</span></li>
                        <li><span>济南</span></li>
                        <li><span>福州</span></li>
                        <li><span>日喀则</span></li>
                        <li><span>厦门</span></li>
                        <li><span>青岛</span></li>
                        <li><span>扬州</span></li>
                        <li><span>合肥</span></li>
                        <li><span>重庆</span></li>
                        <li><span>南昌</span></li>
                        <li><span>唐山</span></li>
                        <li><span>杭州</span></li>
                        <li><span>邢台</span></li>
                        <li><span>沈阳</span></li>
                        <li><span>邯郸</span></li>
                        <li><span>昆明</span></li>
                    </ul>
                </div>
            </div>
            <div id="city-left">
                陕西省 西安市
            </div>
            <div id="topic">
                [添加关注]
            </div>
            <div id="topic-city">
                <div class="love">
                    关注的城市
                </div>
                <ul id="like"></ul>
            </div>
        </div>
    </div>
    <div class="base middle" id="md">
        <span>中央气象局 15:52发布</span>

        <div id="big">
            <p>32°</p>
            <div id="bg">晴</div>
            <div id="bg1">
               58 良
            </div>
            <div id="bg2">
                <div class="gg1"></div>
                <div id="g">
                    空气质量指数 58 良
                </div>
                <div id="g1">
                    <div>
                        <strong>28</strong>
                        <em>PM2.5</em>
                    </div>
                    <div>
                        <strong>2</strong>
                        <em>PM10</em>
                    </div>
                    <div>
                        <strong>28</strong>
                        <em>SO2</em>
                    </div>
                    <div>
                        <strong>28</strong>
                        <em>NO2</em>
                    </div>
                    <div>
                        <strong>28</strong>
                        <em>O3</em>
                    </div>
                    <div>
                        <strong>28</strong>
                        <em>CO</em>
                    </div>
                </div>
            </div>
        </div>

        <ul id="xiao">
                <li>
                    <i class="cv1"></i>
                    <div>西南风 1级</div>
                </li>
                <li>
                    <i class="cv2"></i>
                    <div>湿度 63%</div>
                </li>
                <li>
                    <i class="cv3"></i>
                    <div>气压 954hPa</div>
                </li>
        </ul>


        <ul class="yanyu">
            <li id="hyl">天暗下来，你就是阳光~</li>
            <a href="javascript:;" id="zzy"></a>
        </ul>

        <div id="datu">
            <img src="imagee/00.png">
        </div>
    </div>
    <div class="base weather">
        <div class="w1">
            <ul>
                <li>逐小时预报</li>
            </ul>
            <a href="http://www.weather.com.cn/" target="blank" class="aa">数据来源于中国天气网</a>
            <a href="javascript:;" class="arrow-l">
                <
            </a>
            <a href="javascript:;" class="arrow-r">
                >
            </a>
        </div>
        <div class="w2">
            <ul id="zhongjian">
            </ul>
        </div>
    </div>

    <div class="base bottom">
        <div class="b1">
            <div class="tt1">

                <ul>
                    <li>7日天气预报</li>
                </ul>
                <a href="http://www.weather.com.cn/weather15d/101110101.shtml" target="blank">
                    15日天气预报
                </a>

            </div>
            <div class="tt3">
                <canvas id="canvas" width="700" height="200" style="position: absolute;top: 0;left: 0;"></canvas>
            </div>
            <div class="tt2">
            <ul id="tianshu">
                <li style="opacity: 0.5;">
                    <span >昨天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;color: #8a9baf;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li style="background-color: rgba(248,250,255);">
                    <span>今天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">阴</p>
                    <img src="images/01.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li>
                    <span>明天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li>
                    <span>后天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li>
                    <span>后天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li>
                    <span>后天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li>
                    <span>后天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
                <li>
                    <span>后天</span>
                    <div style="font-size: 10px;color: #8a9baf;">08月01日</div>
                    <p style="margin-top: 20px;">晴</p>
                    <img src="images/00.png">
                    <div id="plus" style="font-size: 10px;">
                        <img src="images/00.png">
                        <span>晴</span>
                        <p>东南风 4级</p>
                    </div>
                </li>
            </ul>
            </div>
        </div>
        <div class="b2">
            <div class="z1">
                <ul class="h1">
                    <li>生活指数</li>
                </ul>
                <a href="javascript:;" class="arrow-r1">></a>
                <a href="javascript:;" class="arrow-l1"><</a>
            </div>
            <div class="z2">
                <ul>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao1"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha">穿衣 热</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 50px;"></p>
                                <p>宜:<br/>忌:</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao2"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha1">雨伞 不带伞</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 50px;"></p>
                                <p id="wodema1">天气较好，您在出门的时候无须带雨伞。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao7"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha6">钓鱼 较适宜</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 50px;"></p>
                                <p>宜:<br/>忌:</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao8"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha7">旅游 适宜</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 30px;"></p>
                                <p id="wodema6">天气较好，温度适宜，是个好天气哦。这样的天气适宜旅游，您可以尽情地享受大自然的风光。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao3"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha2">少发 感冒</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 30px;"></p>
                                <p id="wodema2">各项气象条件适宜，发生感冒机率较低。但请避免长期处于空调房间中，以防感冒。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao4"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha3">洗车 适宜</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 30px;"></p>
                                <p id="wodema3">适宜洗车，未来持续两天无雨天气较好，适合擦洗汽车，蓝天白云、风和日丽将伴您的车子连日洁净。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao9"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha8">交通 良好</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 40px;"></p>
                                <p id="wodema7">天气较好，路面干燥，交通气象条件良好，车辆可以正常行驶。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao10"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha9">交通 良好</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 40px;"></p>
                                <p id="wodema8">空气较好</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao5"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha4">运动 适宜</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 30px;"></p>
                                <p id="wodema4">天气较好，赶快投身大自然参与户外运动，尽情感受运动的快乐吧。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao6"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha5">防晒 极强</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 30px;"></p>
                                <p id="wodema5">紫外辐射极强，应特别加强防护，建议涂擦SPF20以上，PA++的防晒护肤品，并随时补涂。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao11"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha10">交通 良好</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 40px;"></p>
                                <p id="wodema9">白天天气晴好，您在这种天气条件下，会感觉早晚凉爽、舒适，午后偏热。</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="bb">
                            <div class="gg1">
                                <i class="tubiao tubiao12"></i>
                                <p style="margin-top: 80px;"></p>
                                <p class="wenzi" id="hahahaha11">交通 良好</p>
                            </div>
                            <div class="gg2">
                                <p style="margin-top: 40px;"></p>
                                <p id="wodema10">白天天气晴好，您在这种天气条件下，会感觉早晚凉爽、舒适，午后偏热。</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="floor">
        <div class="k1">
            <a href="http://www.cma.gov.cn/" target="blank"><img src="https://mat1.gtimg.com/pingjs/ext2020/weather/2017/images/sponsor1-a35bcd70e3.png" alt=""></a>
            <a href="http://www.nmc.cn/" target="blank"><img src="https://mat1.gtimg.com/pingjs/ext2020/weather/2017/images/sponsor2-f78a646b62.png" style="margin-left: 60px;"></a>
            <a href="http://www.weather.com.cn/" target="blank"><img src="https://mat1.gtimg.com/pingjs/ext2020/test2017/sponsor-zgtq.png" style="margin-left: 60px;"></a>
        </div>
        <div class="k2">
            <a href="">关于腾讯 </a>|
            <a href="">About Tencent </a>|
            <a href="">服务协议 </a>|
            <a href="">隐私政策 </a>|
            <a href="">开放平台 </a>|
            <a href="">广告服务 </a>|
            <a href="">腾讯招聘 </a>|
            <a href="">腾讯公益 </a>|
            <a href="">客服中心 </a>|
            <a href="">举报中心 </a>|
            <a href="">网站导航</a>
        </div>
        <div class="k3">
            Copyright © 1998 - 2021 Tencent. All Rights Reserved
        </div>
        <div class="k4">
            <a href="">腾讯公司</a>
            <a href="">版权所有</a>
        </div>
    </div>
</body>

    <script type="text/html" id="tpl">
        <p>{{use.name}} {{use.info}}</p>
    </script>
<!-- 细节里面的 -->
    <script type="text/html" id="tql">
         <p>{{use.detail}}</p>
    </script>

    <script type="text/html" id="hxl">
        <p>{{use[0]}}</p>
    </script>
    <script type="text/html" id="zk">
        <p>{{use[1]}}</p>
    </script>

    <!-- 天前预报的多云等等 -->
    <script type="text/html" id="wrt">
        <p>{{use}}</p>
    </script>
    <script src="js/jsonp代码.js"></script>
    <script src="js/template-web.js"></script>

    <!-- 跳转城市重头戏 -->
    <script>
        var hotcity =document.getElementById('hotcity');
        var illi = hotcity.querySelectorAll('li');
        var input = document.getElementById('city');
        var CITY = document.getElementById('city-bottom');
        var city_left = document.getElementById('city-left');
        var topic = document.getElementById('topic');
        var toc = document.getElementById('topic-city');
        var like = document.getElementById('like');
        var jklove,Flag = 1;
        if(Flag == 1){
            like.innerHTML = '点击“添加关注”添加城市哟~';
            like.style.color = 'rgb(221, 217, 217)'
            like.style.marginLeft = '100px';
            like.style.height = '100px';
        }  
        input.onfocus = function(){
            CITY.style.display = 'block';
        }
        CITY.onmouseleave = function(){
            CITY.style.display = 'none';
        }
        city_left.onmousemove = function(){
            toc.style.display = 'block';
        }
        input.onmousemove= function(){
            toc.style.display = 'none';
        }
        window.city = '西安';
        window.province = '陕西';
        let ssr = [];
        for(jklove=0;jklove<illi.length;++jklove){
            ssr.push(illi[jklove].querySelector('span'));
            ssr[jklove].onclick = function(){
                window.city = this.innerHTML;
                window.province = HotCity(window.city);
            }
        }
        jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    topic.onclick = function(){
                    topic.onclick = null;
                    topic.innerHTML = '[已关注]';
                    topic.style.color = 'white';
                    topic.style.cursor = 'default';
                    if(Flag == 1){
                    like.innerHTML = '';
                    like.style.color = ''
                    like.style.marginLeft = '';
                    like.style.height = '';
                    }
                    if(Flag<=5&&Flag>0){
                        var Li1 = document.createElement('li');
                        var IMG = document.createElement('span');
                        var ciTy = document.createElement('p');
                        var cty = document.createElement('div');
                        var mgi = document.createElement('img');
                        var Degree = document.createElement('strong');
                        like.appendChild(Li1);
                        Li1.appendChild(IMG);
                        Li1.appendChild(ciTy);
                        Li1.appendChild(mgi);
                        Li1.appendChild(cty);
                        Li1.appendChild(Degree);
                        ciTy.innerHTML = city+'市';
                        cty.innerHTML = data.data.forecast_24h[1].day_weather;
                        mgi.src = fn(data.data.forecast_24h[1].day_weather_code);
                        Degree.innerHTML = data.data.forecast_24h[1].max_degree+'°/'+data.data.forecast_24h[1].min_degree+'°';
                        Li1.onmousemove = function(){
                            Li1.style.backgroundColor = 'rgb(221, 217, 217)';
                        }
                        Li1.onmouseleave= function(){
                            Li1.style.backgroundColor = 'white';
                        }
                        IMG.onclick = function(){
                            like.removeChild(Li1);
                            Flag--;
                            if(Boolean(like.children[0])==false){
                                like.innerHTML = '点击“添加关注”添加城市哟~';
                                like.style.color = 'rgb(221, 217, 217)'
                                like.style.marginLeft = '100px';
                                like.style.height = '100px';
                            }
                        }
                        Flag++;
                    }
                }       
                }
            })
    </script>

    <!-- 垃圾冗长代码 -->
    <script>
    let ha = document.getElementById('hahahaha');
    let ha1 = document.getElementById('hahahaha1');
    let ha2 = document.getElementById('hahahaha2');
    let ha3 = document.getElementById('hahahaha3');
    let ha4 = document.getElementById('hahahaha4');
    let ha5 = document.getElementById('hahahaha5');
    let ha6 = document.getElementById('hahahaha6');
    let ha7 = document.getElementById('hahahaha7');
    let ha8 = document.getElementById('hahahaha8');
    let ha9 = document.getElementById('hahahaha9');
    let ha10 = document.getElementById('hahahaha10');
    let ha11 = document.getElementById('hahahaha11');

    let wodema1 = document.getElementById('wodema1');
    let wodema2 = document.getElementById('wodema2');
    let wodema3 = document.getElementById('wodema3');
    let wodema4 = document.getElementById('wodema4');
    let wodema5 = document.getElementById('wodema5');
    let wodema6 = document.getElementById('wodema6');
    let wodema7 = document.getElementById('wodema7');
    let wodema8 = document.getElementById('wodema8');
    let wodema9 = document.getElementById('wodema9');
    let wodema10 = document.getElementById('wodema10');
    

    jsonp({
        url:'https://wis.qq.com/weather/common',
        data:{    
                source:'pc',
                weather_type:'index',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                var html = template('tpl',{use:data.data.index.clothes});
                var html1 = template('tpl',{use:data.data.index.umbrella});
                var html2 = template('tpl',{use:data.data.index.cold});
                var html3 = template('tpl',{use:data.data.index.carwash});
                var html4 = template('tpl',{use:data.data.index.sports});
                var html5 = template('tpl',{use:data.data.index.sunscreen});
                var html6 = template('tpl',{use:data.data.index.fish});
                var html7 = template('tpl',{use:data.data.index.tourism});
                var html8 = template('tpl',{use:data.data.index.traffic});
                var html9 = template('tpl',{use:data.data.index.diffusion});
                var html10 = template('tpl',{use:data.data.index.comfort});
                var html11 = template('tpl',{use:data.data.index.drying});
                ha.innerHTML = html;
                ha1.innerHTML = html1;
                ha2.innerHTML = html2;
                ha3.innerHTML = html3;
                ha4.innerHTML = html4;
                ha5.innerHTML = html5;
                ha6.innerHTML = html6;
                ha7.innerHTML = html7;
                ha8.innerHTML = html8;
                ha9.innerHTML = html9;
                ha10.innerHTML = html10;
                ha11.innerHTML = html11;

                var htmll1 = template('tql',{use:data.data.index.umbrella});
                var htmll2 = template('tql',{use:data.data.index.cold});
                var htmll3 = template('tql',{use:data.data.index.carwash});
                var htmll4 = template('tql',{use:data.data.index.sports});
                var htmll5 = template('tql',{use:data.data.index.sunscreen});
                var htmll6 = template('tql',{use:data.data.index.tourism});
                var htmll7 = template('tql',{use:data.data.index.traffic});
                var htmll8 = template('tql',{use:data.data.index.diffusion});
                var htmll9 = template('tql',{use:data.data.index.comfort});
                var htmll10 = template('tql',{use:data.data.index.drying});
                wodema1.innerHTML = htmll1;
                wodema2.innerHTML = htmll2;
                wodema3.innerHTML = htmll3;
                wodema4.innerHTML = htmll4;
                wodema5.innerHTML = htmll5;
                wodema6.innerHTML = htmll6;
                wodema7.innerHTML = htmll7;
                wodema8.innerHTML = htmll8;
                wodema9.innerHTML = htmll9;
                wodema10.innerHTML = htmll10;
            }

    });
    </script>
    <!-- 较好的代码 -->
    <script>
    let hyl = document.getElementById('hyl');
    let zzy = document.getElementById('zzy');
    let i = 0;
    zzy.onclick = function(){
        jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'forecast_24h',
                weather_type:'tips',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                if(i==0){
                    var html12 = template('hxl',{use:data.data.tips.observe});
                    hyl.innerHTML = html12;
                    i++;
                }
                else{
                    var html12 = template('zk',{use:data.data.tips.observe});
                    hyl.innerHTML = html12;
                    i--;
                }
            }
        })
    }
    </script>

    <!-- 计算天数的东西 -->
    <script>
        var tianshu = document.getElementById('tianshu');
        var li = tianshu.querySelectorAll('li');
        var k,j;
        var str = '';
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate()-1;
        var arr = ['周日','周一','周二','周三','周四','周五','周六'];
        //有点进制问题
        for(j=0;j<8;++j){
            var ts = li[j].querySelector('div'); 
            var str = '';
            str = month<10?str+'0'+month+'月':str+month+'月';
            str = day<10?str+'0'+day+'日':str+day+'日';
            ts.innerHTML = str;
            day++;
        }
        //计算星期
        for(k=4;k<8;++k){
            var xq = date.getDay();
            var xp = li[k].querySelector('span');
            xq = (xq+k-1)%7;
            xp.innerHTML = arr[xq];
        }
    </script>

    <!-- 天气预报的晴天等等 -->
    <script>
        var tianshu = document.getElementById('tianshu');
        var li = tianshu.querySelectorAll('li');
            let p0 = li[0].querySelector('p');  
            let p1 = li[1].querySelector('p');   
            let p2 = li[2].querySelector('p');   
            let p3 = li[3].querySelector('p');   
            let p4 = li[4].querySelector('p');   
            let p5 = li[5].querySelector('p');   
            let p6 = li[6].querySelector('p');   
            let p7 = li[7].querySelector('p');            
            jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    var z0= template('wrt',{use:data.data.forecast_24h[0].day_weather});
                    var z1= template('wrt',{use:data.data.forecast_24h[1].day_weather});
                    var z2= template('wrt',{use:data.data.forecast_24h[2].day_weather});
                    var z3= template('wrt',{use:data.data.forecast_24h[3].day_weather});
                    var z4= template('wrt',{use:data.data.forecast_24h[4].day_weather});
                    var z5= template('wrt',{use:data.data.forecast_24h[5].day_weather});
                    var z6= template('wrt',{use:data.data.forecast_24h[6].day_weather});
                    var z7= template('wrt',{use:data.data.forecast_24h[7].day_weather});
                    p0.innerHTML = z0;
                    p1.innerHTML = z1;
                    p2.innerHTML = z2;
                    p3.innerHTML = z3;
                    p4.innerHTML = z4;
                    p5.innerHTML = z5;
                    p6.innerHTML = z6;
                    p7.innerHTML = z7;
                }
            })
    </script>

    <!-- 天气预报的图片 -->
    <script>
        var tianshu = document.getElementById('tianshu');
        var li = tianshu.querySelectorAll('li');
        let img = [li[0].querySelector('img'),li[1].querySelector('img'),li[2].querySelector('img'),li[3].querySelector('img'),li[4].querySelector('img'),li[5].querySelector('img'),li[6].querySelector('img'),li[7].querySelector('img')];
        let rx = [li[0].querySelector('#plus'),li[1].querySelector('#plus'),li[2].querySelector('#plus'),li[3].querySelector('#plus'),li[4].querySelector('#plus'),li[5].querySelector('#plus'),li[6].querySelector('#plus'),li[7].querySelector('#plus')];
        let sz1 = [];
        let sz2 = [];
        let sz3 = [];
        let num4;
        for(num4=0;num4<8;++num4){
            sz1.push(rx[num4].querySelector('img'));
            sz2.push(rx[num4].querySelector('p'));
            sz3.push(rx[num4].querySelector('span'));
        }
            jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    var dd,num;
                    for(num=0;num<8;++num){
                    dd = fn(data.data.forecast_24h[num].day_weather_code);
                    img[num].src = dd;   
                    dd = fr(data.data.forecast_24h[num].night_weather_code);
                    sz1[num].src = dd;
                    sz2[num].innerHTML = data.data.forecast_24h[num].night_wind_direction+' '+data.data.forecast_24h[num].night_wind_power+'级';
                    sz3[num].innerHTML = data.data.forecast_24h[num].night_weather;
                    }            
                }
            })
    </script>

    <!-- 中间轮播图的东西 还没弄好-->
    <script>
        var zhongjian = document.getElementById('zhongjian');
        let da;
        for(da=0;da<24;++da){
            var li = document.createElement('li');
            var p = document.createElement('p');
            var img1 = document.createElement('img');
            var div = document.createElement('div');
            zhongjian.appendChild(li);
            li.appendChild(p);
            li.appendChild(img1);
            li.appendChild(div);
        } 
        var li = zhongjian.querySelectorAll('li');
        let ARR = [];//图片的
        let Arr = [];//时间的
        let aRR = [];//温度的
        var t;
        var n1,n2,n3;
        for(t=0;t<24;++t){
            ARR.push(li[t].querySelector('img'));
            Arr.push(li[t].querySelector('p'));
            aRR.push(li[t].querySelector('div'));
        }
        jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_1h|rise',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    var dd1,num1;
                    var y1;
                    var y2;
                    var y3;
                    for(num1=0;num1<24;++num1){
                        y1 = parseInt(data.data.rise[0].sunrise.substring(0,2)+data.data.rise[0].sunrise.substring(3,5));
                        y2 = parseInt(data.data.rise[0].sunset.substring(0,2)+data.data.rise[0].sunset.substring(3,5));
                        y3 = parseInt(data.data.forecast_1h[num1].update_time.substring(8,10)+data.data.forecast_1h[num1].update_time.substring(10,12));
                        dd1 = fn1(data.data.forecast_1h[num1].update_time.substring(8,10),data.data.forecast_1h[num1].update_time.substring(10,12));
                        Arr[num1].innerHTML = dd1;
                        aRR[num1].innerHTML = data.data.forecast_1h[num1].degree+'°';
                        if(y1<=y3 && y2>=y3){
                           ARR[num1].src = fn(data.data.forecast_1h[num1].weather_code);
                        }
                        else{
                            ARR[num1].src = fr(data.data.forecast_1h[num1].weather_code);
                        }
                    }
                    for(num1=0;num1<24;++num1){
                        y1 = parseInt(data.data.rise[0].sunrise.substring(0,2)+'00');
                        y2 = parseInt(data.data.rise[0].sunset.substring(0,2)+'00');
                        y3 = parseInt(data.data.forecast_1h[num1].update_time.substring(8,10)+data.data.forecast_1h[num1].update_time.substring(10,12));
                        if(y2 == y3){
                            var li1 = document.createElement('li');
                            var p = document.createElement('p');
                            var img1 = document.createElement('img');
                            var div = document.createElement('div');
                            li1.appendChild(p);
                            li1.appendChild(img1);
                            li1.appendChild(div);
                            n1 = li1.querySelector('img');
                            n2 = li1.querySelector('p');
                            n3 = li1.querySelector('div');
                            n1.src = 'images/set.png'
                            n2.innerHTML = data.data.rise[0].sunset;
                            n3.innerHTML = '日落';
                            zhongjian.insertBefore(li1,zhongjian.children[num1+1]);
                        }
                        if(y1 == y3){
                            var li2 = document.createElement('li');
                            var p = document.createElement('p');
                            var img1 = document.createElement('img');
                            var div = document.createElement('div');
                            li2.appendChild(p);
                            li2.appendChild(img1);
                            li2.appendChild(div);
                            n1 = li2.querySelector('img');
                            n2 = li2.querySelector('p');
                            n3 = li2.querySelector('div');
                            n1.src = 'images/rise.png'
                            n2.innerHTML = data.data.rise[0].sunrise;
                            n3.innerHTML = '日出';
                            zhongjian.insertBefore(li2,zhongjian.children[num1+2]);
                            
                        }
                    }

                }
            })
        
    </script>

    <!-- 中间模块的制造 -->
    <script>
        var md = document.getElementById('md');
        var xiao = md.querySelectorAll('li');
        var span1 = md.querySelector('span');
        // 中间的大字
        var big = document.getElementById('big');
        var pp1 = big.querySelector('p');
        var pp2 = big.querySelector('#bg');

        var a1 = [];
        var a2 = [];
        var b1;
        for(b1=0;b1<3;++b1){
            a1.push(xiao[b1].querySelector('i'));
            a2.push(xiao[b1].querySelector('div'));
        }
        jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'observe',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                span1.innerHTML ='中央气象台 '+data.data.observe.update_time.substring(8,10)+':'+data.data.observe.update_time.substring(10,12)+'发布';
                a2[0].innerHTML =fm(data.data.observe.wind_direction)+' '+data.data.observe.wind_power+'级';
                a1[0].style.backgroundPosition = ff(data.data.observe.wind_direction);
                a2[1].innerHTML = '湿度'+' '+data.data.observe.humidity+'%';
                a2[2].innerHTML = '气压'+' '+data.data.observe.pressure+'hPa';
                pp1.innerHTML = data.data.observe.degree+'°';
                pp2.innerHTML = data.data.observe.weather;
            }              
        })
    </script>

    <!-- 关于中间模块两个预警小部分的制造 -->
    <script>
         var md = document.getElementById('md');
         var bg1 = md.querySelector('#bg1');
         var bg2 = md.querySelector('#bg2');
         var g = md.querySelector('#g');
         var g1 = bg2.querySelector('#g1');
         var gg1 = bg2.querySelector('.gg1');
         var vid = g1.querySelectorAll('div');
         var iu;
         var op = [];//number
         for(iu=0;iu<6;++iu){
            op.push(vid[iu].querySelector('strong'));
         }
         bg1.onmouseover = function(){
            bg2.style.display = 'block';
         }
         bg1.onmouseout = function(){
            bg2.style.display = 'none';
         }
         jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'air',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                bg1.innerHTML = data.data.air.aqi+' '+data.data.air.aqi_name;
                bg1.style.backgroundColor = nf(data.data.air.aqi_level);
                g.innerHTML = '空气质量指数 '+data.data.air.aqi+' '+data.data.air.aqi_name;
                g.style.backgroundColor = nf(data.data.air.aqi_level);
                gg1.style.borderBottomColor = nf(data.data.air.aqi_level);
                var as = 'pm2.5'
                op[0].innerHTML = data.data.air[as];
                op[1].innerHTML = data.data.air.pm10;
                op[2].innerHTML = data.data.air.so2;
                op[3].innerHTML = data.data.air.no2;
                op[4].innerHTML = data.data.air.o3;
                op[5].innerHTML = data.data.air.co;
            }            
        })
    </script>

    <!-- 判断日升日落的东西 -->
    <script>
        var datu = document.getElementById('datu');
        var imgs = datu.querySelector('img');
        var date = new Date();
        var x1,x2,x3;
        x1 = parseInt(date.getHours()+''+(date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()));
        jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'rise|observe',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
               x2 = parseInt(data.data.rise[0].sunrise.substring(0,2)+data.data.rise[0].sunrise.substring(3,5));
               x3 = parseInt(data.data.rise[0].sunset.substring(0,2)+data.data.rise[0].sunset.substring(3,5));
               if(x2<=x1 && x1<=x3){
                    imgs.src = fo(data.data.observe.weather_code);
               }//白天
               else{
                    imgs.src = of(data.data.observe.weather_code);
               }//晚上
            }            
        })
    </script>

    <!-- canvas的代码 -->
    <script type="text/javascript">
        var num2,num3;
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext('2d');
        jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                //上半区的代码
                ctx.beginPath();
                ctx.moveTo(40,70);
                for(num2=1;num2<8;++num2){
                    num3 = (parseInt(data.data.forecast_24h[num2].max_degree)-parseInt(data.data.forecast_24h[0].max_degree));
                    num3 = (70-num3*6);
                    ctx.lineTo(40+90*num2,num3);
                }
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'rgba(252,195,112)';
                
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                
                ctx.arc(40,70,3,0,2*Math.PI);
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].max_degree)-parseInt(data.data.forecast_24h[0].max_degree));
                    num3 = (70-num3*6);
                    ctx.arc(40+90*num2,num3,3,0,2*Math.PI);
                    // ctx.fill();
                }
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.font = "18px 微软雅黑";  
                ctx.fillText(data.data.forecast_24h[0].max_degree+"°",40-10,70-10,50);  
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].max_degree)-parseInt(data.data.forecast_24h[0].max_degree));
                    num3 = (70-num3*6);
                    ctx.fillText(data.data.forecast_24h[num2].max_degree+"°",40+90*num2-10,num3-10,50);
                }
                ctx.stroke();
                ctx.closePath();

                //下半区的代码
                ctx.beginPath();
                ctx.moveTo(40,130);
                for(num2=1;num2<8;++num2){
                    num3 = (parseInt(data.data.forecast_24h[num2].min_degree)-parseInt(data.data.forecast_24h[0].min_degree));
                    num3 = (130-num3*6);
                    ctx.lineTo(40+90*num2,num3);
                }
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'rgba(148,204,249)';
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.arc(40,130,3,0,2*Math.PI);
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].min_degree)-parseInt(data.data.forecast_24h[0].min_degree));
                    num3 = (130-num3*6);
                    ctx.arc(40+90*num2,num3,3,0,2*Math.PI);
                }
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.font = "18px 微软雅黑";
                ctx.fillText(data.data.forecast_24h[0].min_degree+"°",40-10,130+25,50);  
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].min_degree)-parseInt(data.data.forecast_24h[0].min_degree));
                    num3 = (130-num3*6);
                    ctx.fillText(data.data.forecast_24h[num2].min_degree+"°",40+90*num2-10,num3+25,50);
                }
                ctx.stroke();
                ctx.closePath();
            }            
        })
    </script>
    <!-- 爆裂炸弹的垃圾代码 -->
    <script>
        for(jklove=0;jklove<illi.length;++jklove){
            ssr.push(illi[jklove].querySelector('span'));
            ssr[jklove].onclick = function(){
                window.city = this.innerHTML;
                window.province = HotCity(window.city);
                city_left.innerHTML = province+'省 '+city+'市';
                topic.innerHTML = '[添加关注]';
                topic.style.color = 'rgb(221, 217, 217)';
                topic.style.cursor = 'pointer';
                jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    topic.onclick = function(){
                    topic.onclick = null;
                    topic.innerHTML = '[已关注]';
                    topic.style.color = 'white';
                    topic.style.cursor = 'default';
                    if(Flag == 1){
                    like.innerHTML = '';
                    like.style.color = ''
                    like.style.marginLeft = '';
                    like.style.height = '';
                    }
                    if(Flag<=5&&Flag>0){
                        var Li1 = document.createElement('li');
                        var IMG = document.createElement('span');
                        var ciTy = document.createElement('p');
                        var cty = document.createElement('div');
                        var mgi = document.createElement('img');
                        var Degree = document.createElement('strong');
                        like.appendChild(Li1);
                        Li1.appendChild(IMG);
                        Li1.appendChild(ciTy);
                        Li1.appendChild(mgi);
                        Li1.appendChild(cty);
                        Li1.appendChild(Degree);
                        ciTy.innerHTML = city+'市';
                        cty.innerHTML = data.data.forecast_24h[1].day_weather;
                        mgi.src = fn(data.data.forecast_24h[1].day_weather_code);
                        Degree.innerHTML = data.data.forecast_24h[1].max_degree+'°/'+data.data.forecast_24h[1].min_degree+'°';
                        Li1.onmousemove = function(){
                            Li1.style.backgroundColor = 'rgb(221, 217, 217)';
                        }
                        Li1.onmouseleave= function(){
                            Li1.style.backgroundColor = 'white';
                        }
                        IMG.onclick = function(){
                            like.removeChild(Li1);
                            Flag--;
                            if(Boolean(like.children[0])==false){
                                like.innerHTML = '点击“添加关注”添加城市哟~';
                                like.style.color = 'rgb(221, 217, 217)'
                                like.style.marginLeft = '100px';
                                like.style.height = '100px';
                            }
                        }
                        Flag++;
                    }
                }       
                }
            })
                jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                ctx.clearRect(0,0,1000,1000); 
                //上半区的代码
                ctx.beginPath();
                ctx.moveTo(40,70);
                for(num2=1;num2<8;++num2){
                    num3 = (parseInt(data.data.forecast_24h[num2].max_degree)-parseInt(data.data.forecast_24h[0].max_degree));
                    num3 = (70-num3*6);
                    ctx.lineTo(40+90*num2,num3);
                }
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'rgba(252,195,112)';
                
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                
                ctx.arc(40,70,3,0,2*Math.PI);
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].max_degree)-parseInt(data.data.forecast_24h[0].max_degree));
                    num3 = (70-num3*6);
                    ctx.arc(40+90*num2,num3,3,0,2*Math.PI);
                    // ctx.fill();
                }
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.font = "18px 微软雅黑";  
                ctx.fillText(data.data.forecast_24h[0].max_degree+"°",40-10,70-10,50);  
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].max_degree)-parseInt(data.data.forecast_24h[0].max_degree));
                    num3 = (70-num3*6);
                    ctx.fillText(data.data.forecast_24h[num2].max_degree+"°",40+90*num2-10,num3-10,50);
                }
                ctx.stroke();
                ctx.closePath();

                //下半区的代码
                ctx.beginPath();
                ctx.moveTo(40,130);
                for(num2=1;num2<8;++num2){
                    num3 = (parseInt(data.data.forecast_24h[num2].min_degree)-parseInt(data.data.forecast_24h[0].min_degree));
                    num3 = (130-num3*6);
                    ctx.lineTo(40+90*num2,num3);
                }
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'rgba(148,204,249)';
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.arc(40,130,3,0,2*Math.PI);
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].min_degree)-parseInt(data.data.forecast_24h[0].min_degree));
                    num3 = (130-num3*6);
                    ctx.arc(40+90*num2,num3,3,0,2*Math.PI);
                }
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.font = "18px 微软雅黑";
                ctx.fillText(data.data.forecast_24h[0].min_degree+"°",40-10,130+25,50);  
                for(num2=1;num2<8;++num2){                
                    num3 = (parseInt(data.data.forecast_24h[num2].min_degree)-parseInt(data.data.forecast_24h[0].min_degree));
                    num3 = (130-num3*6);
                    ctx.fillText(data.data.forecast_24h[num2].min_degree+"°",40+90*num2-10,num3+25,50);
                }
                ctx.stroke();
                ctx.closePath();
            }            
        })
                jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'observe',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                span1.innerHTML ='中央气象台 '+data.data.observe.update_time.substring(8,10)+':'+data.data.observe.update_time.substring(10,12)+'发布';
                a2[0].innerHTML =fm(data.data.observe.wind_direction)+' '+data.data.observe.wind_power+'级';
                a1[0].style.backgroundPosition = ff(data.data.observe.wind_direction);
                a2[1].innerHTML = '湿度'+' '+data.data.observe.humidity+'%';
                a2[2].innerHTML = '气压'+' '+data.data.observe.pressure+'hPa';
                pp1.innerHTML = data.data.observe.degree+'°';
                pp2.innerHTML = data.data.observe.weather;
            }              
        })
                jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'air',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                bg1.innerHTML = data.data.air.aqi+' '+data.data.air.aqi_name;
                bg1.style.backgroundColor = nf(data.data.air.aqi_level);
                g.innerHTML = '空气质量指数 '+data.data.air.aqi+' '+data.data.air.aqi_name;
                g.style.backgroundColor = nf(data.data.air.aqi_level);
                gg1.style.borderBottomColor = nf(data.data.air.aqi_level);
                var as = 'pm2.5'
                op[0].innerHTML = data.data.air[as];
                op[1].innerHTML = data.data.air.pm10;
                op[2].innerHTML = data.data.air.so2;
                op[3].innerHTML = data.data.air.no2;
                op[4].innerHTML = data.data.air.o3;
                op[5].innerHTML = data.data.air.co;
            }            
        })
                jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'rise|observe',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
               x2 = parseInt(data.data.rise[0].sunrise.substring(0,2)+data.data.rise[0].sunrise.substring(3,5));
               x3 = parseInt(data.data.rise[0].sunset.substring(0,2)+data.data.rise[0].sunset.substring(3,5));
               if(x2<=x1 && x1<=x3){
                    imgs.src = fo(data.data.observe.weather_code);
               }//白天
               else{
                    imgs.src = of(data.data.observe.weather_code);
               }//晚上
            }            
        })    
                jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_1h|rise',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    var dd1,num1;
                    var y1;
                    var y2;
                    var y3;
                    console.log(zhongjian.children[6].children[2].innerHTML);
                    for(num=0;num<zhongjian.children.length;++num){
                        if(zhongjian.children[num].children[2].innerHTML == '日落')
                        zhongjian.removeChild(zhongjian.children[num]);
                    }
                    for(num=0;num<zhongjian.children.length;++num){
                        if(zhongjian.children[num].children[2].innerHTML == '日出')
                        zhongjian.removeChild(zhongjian.children[num]);
                    }
                    for(num1=0;num1<24;++num1){
                        y1 = parseInt(data.data.rise[0].sunrise.substring(0,2)+data.data.rise[0].sunrise.substring(3,5));
                        y2 = parseInt(data.data.rise[0].sunset.substring(0,2)+data.data.rise[0].sunset.substring(3,5));
                        y3 = parseInt(data.data.forecast_1h[num1].update_time.substring(8,10)+data.data.forecast_1h[num1].update_time.substring(10,12));
                        dd1 = fn1(data.data.forecast_1h[num1].update_time.substring(8,10),data.data.forecast_1h[num1].update_time.substring(10,12));
                        Arr[num1].innerHTML = dd1;
                        aRR[num1].innerHTML = data.data.forecast_1h[num1].degree+'°';
                        if(y1<=y3 && y2>=y3){
                           ARR[num1].src = fn(data.data.forecast_1h[num1].weather_code);
                        }
                        else{
                            ARR[num1].src = fr(data.data.forecast_1h[num1].weather_code);
                        }
                    }
                    for(num1=0;num1<24;++num1){
                        y1 = parseInt(data.data.rise[0].sunrise.substring(0,2)+'00');
                        y2 = parseInt(data.data.rise[0].sunset.substring(0,2)+'00');
                        y3 = parseInt(data.data.forecast_1h[num1].update_time.substring(8,10)+data.data.forecast_1h[num1].update_time.substring(10,12));
                        if(y2 == y3){
                            var li1 = document.createElement('li');
                            var p = document.createElement('p');
                            var img1 = document.createElement('img');
                            var div = document.createElement('div');
                            li1.appendChild(p);
                            li1.appendChild(img1);
                            li1.appendChild(div);
                            n1 = li1.querySelector('img');
                            n2 = li1.querySelector('p');
                            n3 = li1.querySelector('div');
                            n1.src = 'images/set.png'
                            n2.innerHTML = data.data.rise[0].sunset;
                            n3.innerHTML = '日落';
                            zhongjian.insertBefore(li1,zhongjian.children[num1+1]);
                        }
                        if(y1 == y3){
                            // zhongjian.removeChild(li2);
                            var li2 = document.createElement('li');
                            var p = document.createElement('p');
                            var img1 = document.createElement('img');
                            var div = document.createElement('div');
                            li2.appendChild(p);
                            li2.appendChild(img1);
                            li2.appendChild(div);
                            n1 = li2.querySelector('img');
                            n2 = li2.querySelector('p');
                            n3 = li2.querySelector('div');
                            n1.src = 'images/rise.png'
                            n2.innerHTML = data.data.rise[0].sunrise;
                            n3.innerHTML = '日出';
                            zhongjian.insertBefore(li2,zhongjian.children[num1+2]);
                            
                        }
                    }
                }
            })    
                jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    var dd,num;
                    for(num=0;num<8;++num){
                    dd = fn(data.data.forecast_24h[num].day_weather_code);
                    img[num].src = dd;   
                    dd = fr(data.data.forecast_24h[num].night_weather_code);
                    sz1[num].src = dd;
                    sz2[num].innerHTML = data.data.forecast_24h[num].night_wind_direction+' '+data.data.forecast_24h[num].night_wind_power+'级';
                    sz3[num].innerHTML = data.data.forecast_24h[num].night_weather;
                    }            
                }
            })
                jsonp({
                url:'https://wis.qq.com/weather/common',
                data:{    
                source:'pc',
                weather_type:'forecast_24h',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
                },
                success:function(data){
                    var z0= template('wrt',{use:data.data.forecast_24h[0].day_weather});
                    var z1= template('wrt',{use:data.data.forecast_24h[1].day_weather});
                    var z2= template('wrt',{use:data.data.forecast_24h[2].day_weather});
                    var z3= template('wrt',{use:data.data.forecast_24h[3].day_weather});
                    var z4= template('wrt',{use:data.data.forecast_24h[4].day_weather});
                    var z5= template('wrt',{use:data.data.forecast_24h[5].day_weather});
                    var z6= template('wrt',{use:data.data.forecast_24h[6].day_weather});
                    var z7= template('wrt',{use:data.data.forecast_24h[7].day_weather});
                    p0.innerHTML = z0;
                    p1.innerHTML = z1;
                    p2.innerHTML = z2;
                    p3.innerHTML = z3;
                    p4.innerHTML = z4;
                    p5.innerHTML = z5;
                    p6.innerHTML = z6;
                    p7.innerHTML = z7;
                }
            })    
                jsonp({
            url:'https://wis.qq.com/weather/common',
            data:{    
                source:'pc',
                weather_type:'forecast_24h',
                weather_type:'tips',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                if(i==0){
                    var html12 = template('hxl',{use:data.data.tips.observe});
                    hyl.innerHTML = html12;
                    i++;
                }
                else{
                    var html12 = template('zk',{use:data.data.tips.observe});
                    hyl.innerHTML = html12;
                    i--;
                }
            }
        })
                jsonp({
        url:'https://wis.qq.com/weather/common',
        data:{    
                source:'pc',
                weather_type:'index',
                province:province+'省', //河南 陕西
                city:city+'市'       //郑州 西安
            },
            success:function(data){
                var html = template('tpl',{use:data.data.index.clothes});
                var html1 = template('tpl',{use:data.data.index.umbrella});
                var html2 = template('tpl',{use:data.data.index.cold});
                var html3 = template('tpl',{use:data.data.index.carwash});
                var html4 = template('tpl',{use:data.data.index.sports});
                var html5 = template('tpl',{use:data.data.index.sunscreen});
                var html6 = template('tpl',{use:data.data.index.fish});
                var html7 = template('tpl',{use:data.data.index.tourism});
                var html8 = template('tpl',{use:data.data.index.traffic});
                var html9 = template('tpl',{use:data.data.index.diffusion});
                var html10 = template('tpl',{use:data.data.index.comfort});
                var html11 = template('tpl',{use:data.data.index.drying});
                ha.innerHTML = html;
                ha1.innerHTML = html1;
                ha2.innerHTML = html2;
                ha3.innerHTML = html3;
                ha4.innerHTML = html4;
                ha5.innerHTML = html5;
                ha6.innerHTML = html6;
                ha7.innerHTML = html7;
                ha8.innerHTML = html8;
                ha9.innerHTML = html9;
                ha10.innerHTML = html10;
                ha11.innerHTML = html11;

                var htmll1 = template('tql',{use:data.data.index.umbrella});
                var htmll2 = template('tql',{use:data.data.index.cold});
                var htmll3 = template('tql',{use:data.data.index.carwash});
                var htmll4 = template('tql',{use:data.data.index.sports});
                var htmll5 = template('tql',{use:data.data.index.sunscreen});
                var htmll6 = template('tql',{use:data.data.index.tourism});
                var htmll7 = template('tql',{use:data.data.index.traffic});
                var htmll8 = template('tql',{use:data.data.index.diffusion});
                var htmll9 = template('tql',{use:data.data.index.comfort});
                var htmll10 = template('tql',{use:data.data.index.drying});
                wodema1.innerHTML = htmll1;
                wodema2.innerHTML = htmll2;
                wodema3.innerHTML = htmll3;
                wodema4.innerHTML = htmll4;
                wodema5.innerHTML = htmll5;
                wodema6.innerHTML = htmll6;
                wodema7.innerHTML = htmll7;
                wodema8.innerHTML = htmll8;
                wodema9.innerHTML = htmll9;
                wodema10.innerHTML = htmll10;
            }

    });    
            }
        }
    </script>
</html>